<template>
	<view class="otherGarden-view">
		<u-popup mode="bottom" @close="popupClose" v-model="show" height="900" border-radius="20" :closeable="true" :safe-area-inset-bottom="true" close-icon-color="#AAAAAA">
			<view class="popup-view">
				<view class="popup-top-view">
					请选择为TA灌溉的克数
				</view>
				<view class="popup-middle-view">
					<view class="choose-bubble-one" :animation="animationData1">
						10g
					</view>
					<view class="choose-bubble-two" :animation="animationData2">
						18g
					</view>
					<view class="choose-bubble-three" :animation="animationData3">
						33g
					</view>
					<view class="choose-bubble-four" :animation="animationData4">
						66g
					</view>
				</view>
				<view class="popup-bottom-view">
					<view class="popup-bubble" @click="clickBubble(0)">
						10g
					</view>
					<view class="popup-bubble" @click="clickBubble(1)">
						18g
					</view>
					<view class="popup-bubble" @click="clickBubble(2)">
						33g
					</view>
					<view class="popup-bubble" @click="clickBubble(3)">
						66g
					</view>
				</view>
				<view class="popup-checkbox-view">
					<u-checkbox shape="circle" @change="checkboxChange" v-model="remind">
						提醒TA来收(7天内不收会退回)
					</u-checkbox>
				</view>
				<u-button @click="clickIrrigationButton" shape="circle" type="primary">
					帮TA灌溉
				</u-button>
			</view>
		</u-popup>
		<u-navbar :border-bottom="false" :background="{backgroundColor: 'transparent'}" back-icon-color="#FFFFFF">
			<view class="otherGarden-navigation-view">
				{{title}}的园林
			</view>
			<view class="otherGarden-navigation-right-view" slot="right">
				{{dataModel.usableEnergy}}g
			</view>
		</u-navbar>
		<view class="otherGarden-top-view">
			<view class="otherGarden-top-tree-view">
				<view v-if="dataModel.status == 1">
					<u-image src="/static/img/loveforest/small_tree.png" width="197rpx" height="224rpx" mode="aspectFit"></u-image>
				</view>
				<view v-else-if="dataModel.status == 2">
					<u-image src="/static/img/loveforest/middle_tree.png" width="253rpx" height="382rpx" mode="aspectFit"></u-image>
				</view>
				<view v-else-if="dataModel.status == 3">
					<u-image src="/static/img/loveforest/big_tree.png" width="377rpx" height="432rpx" mode="aspectFit"></u-image>
				</view>
				<view v-else>
					
				</view>
				
				<view class="person-bubble" v-for="(item, index) in dataModel.energyBalls" :key="index" :style="positionArray[index]">
					<view v-if="item.energyType == 1">
						<view v-if="item.isSteal == 0">
							<view v-if="item.countdown == 0">
								<view @click="clickMyBubble(index)" class="all_bubble red_bubble">
									<view class="person-bubble-text-green">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
							<view v-else>
								<view class="count-down-view">
									<view class="all_bubble dark_red_bubble"></view>
									<u-count-down :timestamp="item.countdown" :show-days="false" :show-hours="false" color="#EA8466" separator-color="#EA8466"
									bg-color="transparent" font-size="22" separator-size="22" @end="end"></u-count-down>
									<view class="person-bubble-text-green">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="all_bubble dark_red_bubble">
								<view class="person-bubble-text-green">
									{{item.nowEnergy}}g
								</view>
							</view>
						</view>
						<!-- <view class="person-bubble-text-red">
							{{item.nowEnergy}}g
						</view> -->
					</view>
					<view v-else>
						<view v-if="item.isSteal == 0">
							<view v-if="item.stealNum > 0">
								<view @click="clickMyBubble(index)" class="all_bubble half_green_bubble">
									<view class="person-bubble-text-green">
										{{item.nowEnergy}}g
									</view>
								</view>
								
							</view>
							<view v-else>
								<view @click="clickMyBubble(index)" class="all_bubble green_bubble">
									<view class="person-bubble-text-green">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view v-if="item.stealNum > 0">
								<view class="all_bubble dark_half_green_bubble">
									<view class="person-bubble-text-green">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
							<view v-else>
								<view class="all_bubble dark_green_bubble">
									<view class="person-bubble-text-green">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="person-bubble-text-green">
							{{item.nowEnergy}}g
						</view> -->
					</view>
				</view>
				
				<view class="otherGarden-top-kettle-view" :hidden="!irrigation" :animation="animationData">
					
				</view>
			</view>
			<view class="otherGarden-top-button-view">
				<view @click="clickRemind">
					<u-image src="/static/img/loveforest/remind.png" width="140rpx" height="100rpx" mode="scaleToFill"></u-image>
				</view>
				<view @click="clickIrrigation">
					<u-image src="/static/img/loveforest/irrigation.png" width="120rpx" height="100rpx" mode="scaleToFill"></u-image>
				</view>
			</view>
		</view>
		<view class="otherGarden-bottom-view">
			<view class="otherGarden-bottom-detail-view">
				<view class="otherGarden-bottom-detail-top-view">
					<u-image src="/static/img/loveforest/pk1.png" mode="scaleToFill" width="30rpx" height="30rpx"></u-image>
					<u-image src="/static/img/loveforest/pk2.png" mode="scaleToFill" width="190rpx" height="30rpx"></u-image>
				</view>
				<view class="otherGarden-bottom-detail-middle-view">
					<other-garden-cell title1="TA的能量" title2="你的能量" :value1="dataModel.hisEnergy" :value2="dataModel.yourEnergy" :icon="dataModel.hisHeadIcon" :icon1="dataModel.yearHeadIcon"></other-garden-cell>
				</view>
				<view class="otherGarden-bottom-detail-bottom-view">
					<other-garden-cell title1="TA收取你" title2="你收取TA" :value1="dataModel.gainYourEnergy" :value2="dataModel.gainHisEnergy" :icon="dataModel.hisHeadIcon"  :icon1="dataModel.yearHeadIcon"></other-garden-cell>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import otherGardenCell from './other_garden_cell.vue'
	export default {
		components: {
			otherGardenCell
		},
		data() {
			return {
				energyType: 10,
				positionArray: [
					{
						'left': '90rpx',
						'bottom': '170rpx'
					},
					{
						'top': '20rpx',
						'left': '220rpx'
					},
					{
						'top': '10rpx',
						'right': '230rpx'
					},
					{
						'top': '70rpx',
						'left': '90rpx'
					},
					{
						'top': '70rpx',
						'right': '100rpx'
					},
					{
						'left': '50rpx',
						'bottom': '300rpx'
					},
					{
						'right': '60rpx',
						'bottom': '310rpx'
					},
					{
						'right': '110rpx',
						'bottom': '180rpx'
					}
				],
				dataModel: {
					status: 0,
					usableEnergy: 0,
					hisEnergy: 0,
					energyBalls: [],
					yourEnergy: 0,
					gainYourEnergy: 0,
					gainHisEnergy: 0
				},
				show: false,
				userId: 0,
				sureToClick: true,
				animationData: {},
				animationData1: {},
				animationData2: {},
				animationData3: {},
				animationData4: {},
				nowChoose: 0,
				lastChoose: 0,
				yuanbendaxiao: [['72rpx', '72rpx'], ['97rpx', '97rpx'], ['116rpx', '116rpx'], ['135rpx', '135rpx']],
				yuanbenweizhi: [['100rpx', '240rpx'], ['250rpx', '170rpx'], ['250rpx', '410rpx'], ['30rpx', '170rpx']],
				title: '',
				remind: false,
				irrigation: false,
				remindFlag: false
			}
		},
		onLoad(e) {
			this.userId = e.userId
			this.title = e.userName
			var animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			})
			this.animation = animation
			
			this.$u.api.getMemberGarden(e.userId).then(res => {
				console.log(res)
				this.dataModel = res
			}).catch(err => {
				// console.log(err)
			})
		},
		methods: {
			end() {
				for (var i = 0; i < this.dataModel.energyBalls.length; i++) {
					var a = this.dataModel.energyBalls[i]
					if (a.energyType == 1) {
						a.countdown = 0
					}
				}
			},
			clickMyBubble(e) {
				var b = this.dataModel.energyBalls[e]
				this.$u.api.memberGarden(b.pkid).then(res => {
					console.log(res)
					this.$u.api.getMemberGarden(this.userId).then(res => {
						// console.log(res)
						this.dataModel = res
					}).catch(err => {
						// console.log(err)
					})
				}).catch(err => {
					// console.log(err)
				})
			},
			popupClose() {
				this.energyType = 10
				this.animationData1 = {}
				this.animationData2 = {}
				this.animationData3 = {}
				this.animationData4 = {}
				this.nowChoose = 0
				this.lastChoose = 0
				this.sureToClick = true
				this.yuanbenweizhi = [['100rpx', '240rpx'], ['250rpx', '170rpx'], ['250rpx', '410rpx'], ['30rpx', '170rpx']]
			},
			clickIrrigation() {
				this.show = true
			},
			clickRemind() {
				if(this.dataModel.energyBalls.length===0) {
					return
				}
				if(!this.remindFlag) {
					this.$u.api.forestMessage({id:this.userId}).then(res => {
						this.$u.toast(res.msg)
					})
					this.remindFlag = true
				}
				
			},
			checkboxChange(e) {
				this.canClick = e.value
			},
			clickIrrigationButton() {
				var a = this.remind ? 1 : 0
				this.$u.api.getIrrigate({'personId': this.userId, 'energy': this.energyType, 'isNotice': a}).then(res => {
					this.$u.api.getMemberGarden(this.userId).then(res => {
						// console.log(res)
						this.dataModel = res
					}).catch(err => {
						// console.log(err)
					})
					if (this.irrigation == false) {
						this.irrigation = true
						
						var animation = uni.createAnimation({
							duration: 1000,
							timingFunction: 'ease'
						})
						
						animation.rotate(-20).step()
						this.animationData = animation.export()
						setTimeout(function() {
							animation.rotate(20).step()
							this.animationData = animation.export()
							setTimeout(function() {
								this.irrigation = false
							}.bind(this), 1000)
						}.bind(this), 1000)
					}
					this.show = false
				}).catch(err => {
					console.log(err)
				})
			},
			clickBubble(e) {
				this.nowChoose = e
				
				if (this.nowChoose != this.lastChoose) {
					if (this.sureToClick) {
						
						this.sureToClick = false
						
						this.animation.top('100rpx').left('240rpx').width('200rpx').height('200rpx').step()
						
						if (this.nowChoose == 0) {
							this.animationData1 = this.animation.export()
						} else if (this.nowChoose == 1) {
							this.animationData2 = this.animation.export()
						} else if (this.nowChoose == 2) {
							this.animationData3 = this.animation.export()
						} else {
							this.animationData4 = this.animation.export()
						}
						
						let a = this.yuanbendaxiao[this.lastChoose]
						let b = this.yuanbenweizhi[this.nowChoose]
						
						this.animation.top(b[0]).left(b[1]).width(a[0]).height(a[1]).step()
						
						this.yuanbenweizhi[this.lastChoose] = this.yuanbenweizhi.splice(this.nowChoose, 1, this.yuanbenweizhi[this.lastChoose])[0]
						
						if (this.lastChoose == 0) {
							this.animationData1 = this.animation.export()
						} else if (this.lastChoose == 1) {
							this.animationData2 = this.animation.export()
						} else if (this.lastChoose == 2) {
							this.animationData3 = this.animation.export()
						} else {
							this.animationData4 = this.animation.export()
						}
						
						setTimeout(function() {
							this.lastChoose = e
							this.sureToClick = true
							if (e == 0) {
								this.energyType = 10
							} else if (e == 1) {
								this.energyType = 18
							} else if (e == 2) {
								this.energyType = 33
							} else {
								this.energyType = 66
							}
						}.bind(this), 50)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup-view {
		height: 100%;
		padding-left: 35rpx;
		padding-right: 35rpx;
		padding-bottom: 35rpx;
		
		.popup-top-view {
			height: 95rpx;
			border-bottom: 1rpx solid #AAAAAA;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
		}
		
		.popup-middle-view {
			height: calc(455rpx - constant(safe-area-inset-bottom));
			height: calc(455rpx - env(safe-area-inset-bottom));
			position: relative;
			
			.choose-bubble-one {
				top: 100rpx;
				left: 240rpx;
				position: absolute;
				width: 200rpx;
				height: 200rpx;
				color: #5A9D71;
				font-weight: bold;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url(/static/img/loveforest/popup-bubble.png) no-repeat;
				background-size: cover;
			}
			
			.choose-bubble-two {
				top: 250rpx;
				left: 170rpx;
				position: absolute;
				width: 97rpx;
				height: 97rpx;
				color: #5A9D71;
				font-weight: bold;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url(/static/img/loveforest/popup-bubble.png) no-repeat;
				background-size: cover;
			}
			
			.choose-bubble-three {
				top: 250rpx;
				left: 410rpx;
				position: absolute;
				width: 116rpx;
				height: 116rpx;
				color: #5A9D71;
				font-weight: bold;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url(/static/img/loveforest/popup-bubble.png) no-repeat;
				background-size: cover;
			}
			
			.choose-bubble-four {
				top: 30rpx;
				left: 170rpx;
				position: absolute;
				width: 135rpx;
				height: 135rpx;
				color: #5A9D71;
				font-weight: bold;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url(/static/img/loveforest/popup-bubble.png) no-repeat;
				background-size: cover;
			}
		}
		
		.popup-bottom-view {
			height: 135rpx;
			border-top: 1rpx solid #AAAAAA;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			
			.popup-bubble {
				width: 100rpx;
				height: 100rpx;
				color: #5A9D71;
				font-weight: bold;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url(/static/img/loveforest/popup-bubble.png) no-repeat;
				background-size: cover;
			}
		}
		
		.popup-checkbox-view {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.otherGarden-view {
		height: 100vh;
		background: url(/static/img/loveforest/homepage_background.png) no-repeat;
		background-size: cover;
		
		.otherGarden-navigation-view {
			width: 300rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.otherGarden-navigation-right-view {
			height: 60rpx;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 30rpx;
			background-image: linear-gradient(to right, #AFE167, #57B481);
			border: 2rpx solid #FFFFFF;
			display: flex;
			margin-right: -2rpx;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx;
			border-radius: 30rpx 0rpx 0rpx 30rpx;
		}
		
		.otherGarden-top-view {
			height: calc(898rpx - constant(safe-area-inset-top) - 44px);
			height: calc(898rpx - env(safe-area-inset-top) - 44px);
			padding-left: 35rpx;
			padding-right: 35rpx;
			padding-bottom: 35rpx;
			
			.otherGarden-top-tree-view {
				height: calc(763rpx - constant(safe-area-inset-top) - 44px);
				height: calc(763rpx - env(safe-area-inset-top) - 44px);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				padding-bottom: 70rpx;
				position: relative;
				
				.otherGarden-top-kettle-view {
					width: 179rpx;
					height: 120rpx;
					background: url(/static/img/loveforest/kettle.png) no-repeat;
					background-size: cover;
					position: absolute;
					top: 50rpx;
					right: 50rpx;
				}
				
				.person-bubble {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.count-down-view {
						display: flex;
						flex-direction: column;
						align-items: center;
					}
					
					.all_bubble {
						width: 80rpx;
						height: 80rpx;
					}
					
					.red_bubble {
						background: url(/static/img/loveforest/red_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.half_green_bubble {
						background: url(/static/img/loveforest/half_green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.green_bubble {
						background: url(/static/img/loveforest/green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.dark_red_bubble {
						background: url(/static/img/loveforest/dark_red_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.dark_half_green_bubble {
						background: url(/static/img/loveforest/dark_half_green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.dark_green_bubble {
						background: url(/static/img/loveforest/dark_green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.person-bubble-text-red {
						position: absolute;
						font-weight: bold;
						color: #E5694F;
						left: 50%;
						top: 20%;
						transform: translate(-50%, 0);
					}
					
					.person-bubble-text-green {
						position: absolute;
						font-weight: bold;
						color: #589B6D;
						left: 50%;
						top: 20%;
						transform: translate(-50%, 0);
					}
				}
			}
			
			.otherGarden-top-button-view {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
			}
		}
		
		.otherGarden-bottom-view   {
			padding: 0rpx 35rpx;
			height: calc(100vh - constant(safe-area-inset-bottom) - 933rpx);
			height: calc(100vh - env(safe-area-inset-bottom) - 933rpx);
			
			.otherGarden-bottom-detail-view {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				height: 100%;
				padding: 35rpx;
				display: flex;
				flex-direction: column;
				
				.otherGarden-bottom-detail-top-view {
					display: flex;
					justify-content: center;
					flex-shrink: 0;
				}
				
				.otherGarden-bottom-detail-middle-view {
					height: 1rpx;
					flex-grow: 1;
					border-bottom: 1rpx solid #AAAAAA;
				}
				
				.otherGarden-bottom-detail-bottom-view {
					height: 1rpx;
					flex-grow: 1;
				}
			}
		}
	}
</style>
